<template>
  <div id="app">
    <ul class="title">
      <li v-for="(obj, index) in arr" :key="index">
        <router-link :to="{ name: index + 1 }">
          {{ obj.msg }}({{ obj.score }})
        </router-link>
      </li>
    </ul>
    <div class="content">
      <router-view></router-view>
    </div>
  </div>
</template>

<script>
let arr = [];
for (let i = 1; i <= 9; i++) {
  let obj = {};
  obj.msg = `第${i}题`;
  if (i <= 7) {
    obj.score = "10分";
  } else {
    obj.score = "15分";
  }
  arr.push(obj);
}

export default {
  data() {
    return {
      arr,
    };
  },
};
</script>

<style>
.title {
  margin: 10px 10px 0;
}
.title li {
  display: inline-block;
  list-style: none;
  margin: 5px 20px;
}
.content {
  margin: 50px 100px 0;
}
</style>
